<template>
	<div>
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{$store.state.company.companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>智能装备</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path:`/IntelligentEquipment/myEquipment/monitoring?t=${new Date().getTime()}`}">物联网装备</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="tableNavBox">
			<div class="tableBoxTable" style="margin-bottom: 50px;">
				<div class="menberConTitle flex" style="justify-content: space-between;">
					<div class="tableTitle">设备基本信息</div>
				</div>
				<formTemplate :formSet="formSet1" :postData="formData1" class="baseadd" @inputBlur='inputBlur'>
					<template slot="groupName" slot-scope="scope">
						<el-form-item label="设备分组：" style="width:550px">
							<el-select
  							  	v-model="formData1.groupName"
  							  	filterable
								allow-create
  							  	placeholder="请输入"
  							  	:loading="loading"
								style="width:500px"
								@change="handleChange">
  							  	<el-option
  							  	  v-for="(item,index) in optionData.groupName"
  							  	  :key="index"
  							  	  :label="item.name"
  							  	  :value="item.value">
  							  	</el-option>
  							</el-select>
						</el-form-item>
            		</template>
				</formTemplate>
				<div class="menberConTitle flex" style="justify-content: space-between;"> 
					<div class="tableTitle">供应商信息</div>
				</div>
				<formTemplate :formSet="formSet2" :postData="formData1" class="baseadd" :optionData="optionData" @radioInputChange='radioInputChange'>
					<template slot="price" slot-scope="scope">
						<div style="display:flex; justify-content:flex-start;">
							<el-form-item label="预算单价：" style="width:550px;">
								<el-input type="number" v-model="formData1.price" style="width:420px;"></el-input>
							</el-form-item>
							<el-checkbox v-model="formData1.isPrice" :true-label="1" :false-label="0" checked style="width:100px;padding-top:5px">公开</el-checkbox>
						</div>
            		</template>
				</formTemplate>

				<div class="menberConTitle flex" style="justify-content: space-between; margin-buttom:5px">
					<div class="tableTitle">模块通讯协议及入网方式</div>
				</div>
				<formTemplate :formSet="formSet3" :postData="formData1" class="baseadd" :optionData="optionData" @checkboxG="checkboxG"></formTemplate>

				<div class="menberConTitle flex" style="justify-content: space-between;">
					<div class="tableTitle">DO信号配置</div>
				</div>
				<formTemplate :formSet="formSet4" :postData="formData1" class="baseadd" :optionData="optionData"></formTemplate>

				<div class="menberConTitle flex" style="justify-content: space-between;">
					<div class="tableTitle">DI信号配置</div>
				</div>
				<formTemplate :formSet="formSet5" :postData="formData1" class="baseadd" :optionData="optionData"></formTemplate>

				<div class="menberConTitle flex" style="justify-content: space-between;">
					<div class="tableTitle">AO信号配置</div>
				</div>
				<formTemplate :formSet="formSet6" :postData="formData1" class="baseadd" :optionData="optionData"></formTemplate>

				<div class="menberConTitle flex" style="justify-content: space-between;">
					<div class="tableTitle">AI信号配置</div>
				</div>
				<formTemplate :formSet="formSet7" :postData="formData1" class="baseadd" :optionData="optionData"></formTemplate>

				<!-- <tableForm :pageData="partsInfo0" :data="tableSet0" :addNew="false" :optionData="optionData" @selectChange='selectChange'>
				</tableForm> -->

				<div class="menberConTitle flex" style="justify-content: space-between; margin-buttom:5px">
					<div class="tableTitle">装备配件信息</div>
				</div>
				<tableForm :pageData="partsInfo" :data="tableSet" :addNew="false" :optionData="optionData" >
					<template slot="m" slot-scope="scope">
						<div style="display:flex; justify-content:space-around;font-weight:bold;">
							<p style="color:#67C23A;cursor: pointer;" @click="selectFittings(scope.row,scope.row.$index)">选择</p>
							<p style="color:red;cursor: pointer;" @click="partsInfo.items.splice(scope.row.$index,1)">删除</p>
						</div>
					</template>
				</tableForm>
				<el-button type="primary" @click="partsInfo.items.push({})" style="margin:10px 0 0 10px; ">新增设备配件</el-button>

				<div class="menberConTitle flex" style="justify-content: space-between; margin-buttom:5px">
					<div class="tableTitle">配件特征</div>
				</div>
				<el-input
				  type="textarea"
				  :rows="6"
				  placeholder="请输入内容"
				  v-model="formData1.equipmentFeature"
				  style="padding:0 20px">
				</el-input>
			</div>
			<div class="btnBox">
				<el-button round @click="$router.go(-1)">返回</el-button>
				<el-button type="primary" round @click="submitData">保存</el-button>
				<el-button type="danger" v-if="isDetail == true" round @click="deleteData">删除</el-button>
			</div>
		</div>

		<el-dialog
		  title="请选择数字配件"
		  :visible.sync="dialogVisible"
		  width="670px"
		  class="dialog">
		  	<formTemplate ref="form" :formSet="formSet0" :postData="formDig" :optionData="optionDataDig"  :isDialog="true"  @flag="save" @close="close"></formTemplate>
		</el-dialog>
	</div>
</template>

<script>
	import formTemplate from '@/components/form.vue'
	import tableForm from '@/components/tableForm.vue'
	export default {
		components: {
			tableForm,
			formTemplate
		},
		data() {
			return {
				dialogVisible:false,
				formSet0:[
                    { span: 24, label: '配件分组：', prop: 'groupId', type: 'select', disabled:false ,labelWidth:'500px',placeholder:'请先选择分组'},
                    { span: 24, label: '配件名称：', prop: 'equipmentName', type: 'select' , disabled:false,labelWidth:'500px'},
                    { span: 24, label: '配件型号：', prop: 'equipmentModel', type: 'select',labelWidth:'500px'},
                    // { span: 24, label: '设备特征：', prop: 'company', type: 'textarea', disabled:true, rows:4 ,labelWidth:'500px', style:'width:125%'},
                ],
				formSet1:[
                    { span: 24, label: '设备分组：', prop: 'groupName', type: 'slot', disabled:false ,labelWidth:'550px'},
                    { span: 24, label: '设备名称：', prop: 'equipmentName', type: 'input' , disabled:false,labelWidth:'550px'},
                    { span: 24, label: '设备参数描述：', prop: 'equipmentDesc', type: 'input',labelWidth:'550px'},
                ],
				formSet2:[
                    { span: 24, label: '模块供应商：', prop: 'supplierName', type: 'radio_custom', disabled:false ,labelWidth:'550px'},
                    { span: 24, label: '设备型号：', prop: 'equipmentModel', type: 'radio_custom' , disabled:false,labelWidth:'550px'},
                    { span: 24, label: '计量单位：', prop: 'company', type: 'input',labelWidth:'550px'},
                    { span: 24, label: '预算单价：', prop: 'price', type: 'slot',labelWidth:'550px'},
                ],
				formSet3:[
					// { span: 24, label: 'Modbus RTU：', prop: 'communicationProtocol1', type: 'radio', disabled:false ,labelWidth:'600px'},
				],
				formSet4:[
					{ span: 10, label: '端口数量：', prop: 'doNumber', type: 'input', disabled:false ,labelWidth:'600px', width:'40%'},
					{ span: 10, label: '信号类型：', prop: 'doType', type: 'select', disabled:false ,labelWidth:'600px', width:'40%'},
				],
				formSet5:[
					{ span: 10, label: '端口数量：', prop: 'diNumber', type: 'input', disabled:false ,labelWidth:'600px', width:'40%'},
					{ span: 10, label: '信号类型：', prop: 'diType', type: 'select', disabled:false ,labelWidth:'600px', width:'40%'},
				],
				formSet6:[
					{ span: 10, label: '端口数量：', prop: 'aoNumber', type: 'input', disabled:false ,labelWidth:'600px', width:'40%'},
					{ span: 10, label: '信号类型：', prop: 'aoType', type: 'select', disabled:false ,labelWidth:'600px', width:'40%'},
				],
				formSet7:[
					{ span: 10, label: '端口数量：', prop: 'aiNumber', type: 'input', disabled:false ,labelWidth:'600px', width:'40%'},
					{ span: 10, label: '信号类型：', prop: 'aiType', type: 'select', disabled:false ,labelWidth:'600px', width:'40%'},
				],
				tableSet:[
					{ label: '配件型号', prop: 'equipmentModel', type: 'text', disabled:false, },
					{ label: '配件名称', prop: 'equipmentName', type: 'text', disabled:false,placeholder:'请输入通道编号'},
					{ label: '配件供应商', prop: 'supplierName', type: 'text', disabled:false, placeholder:'请输入通道名称'},
					{ label: '配件规格', prop: 'equipmentDesc', type: 'text', disabled:false},
					{ label: '配件数量', prop: 'amounts', type: 'input', disabled:false},
					{ label: '单位', prop: 'company', type: 'text', disabled:false},
					{ label: '操作', prop: 'm', type: 'slot' , },
				],
				formDig:{},
				formData1:{
					isPrice:1,
				},
				partsInfo:{items:[]},
				partsInfo0:{items:[]},
				companyId: this.$store.state.company.companyId,
				companyName: this.$store.state.company.companyName,
				userId: this.$store.state.user.userInfo.id,
				optionDataDig:{},
				optionData:{
					custom:{
						supplierName:{},
						equipmentModel:{},
					},
					supplierName:[{label:'备选1',value:'1'},{label:'备选2',value:'2'},],
				},
				listDig:{
					data:[],
					index:0
				}, //数字配件暂存
				loading:false,
				isDetail:false, // 是否为详情页
				networkAccessList:[],//模块通讯协议及入网方式
			}
		},
		created() {
			this.$store.commit('digitalOrchard_leftNavIndex', 11)
			this.getGroup('INTERNETDEVICES')
			this.getPartsSuppliers()
			this.queryNetworkAccessMethod()
			this.getDictionary('SWITCHUPLOAD','doType',null) 
			this.getDictionary('SWITCHISSUANCE','diType',null) 
			this.getDictionary('ANALOGUPLOAD','aoType',null) 
			this.getDictionary('ANALOGISSUANCE','aiType',null) 
			if(this.$route.query.dictImageEquipmentId){
				this.getImageEquipmentDetails(this.$route.query.dictImageEquipmentId)
			}
		},
		mounted() {
		},
		watch: {
			'formData1.supplierName'(e){
				if(this.formData1.supplierName){
					this.getModelBySuppliers()
				}
			},
			'formDig.groupId'(e){
				if(this.formDig.groupId){
					this.$request.get(this.$api.getEquipmentName, {
						companyId:this.companyId,
						groupId:this.formDig.groupId,
					}).then(res=>{
						if(res.code == 200){
							let a = res.data.map(item =>{
								return{
									name:item,
									value:item
								}
							})
							this.$set(this.optionDataDig,'equipmentName',a)
						}
					})
				}
			},
			'formDig.equipmentName'(e){
				if(this.formDig.equipmentName){
					this.$request.get(this.$api.getEquipmentModel, {
						companyId:this.companyId,
						groupId:this.formDig.groupId,
						equipmentName:this.formDig.equipmentName
					}).then(res=>{
						if(res.code == 200){
							this.listDig.data  = res.data
							let a = res.data.map(item =>{
								return{
									name:item.equipmentModel,
									value:item.equipmentModel
								}
							})
							this.$set(this.optionDataDig,'equipmentModel',a)
						}
					})
				}
			}
		},
		methods: {
			queryNetworkAccessMethod(){
				this.$request.get(this.$api.queryNetworkAccessMethod).then(res=>{
					if(res.code == 200){
						if(res.data.length >0){
							res.data.forEach(item =>{
								this.networkAccessList.push({data:item.communicationProtocolCode})
								this.formSet3.push({ span: 24, label: item.communicationProtocolValue+'：', disabled:false , max:1, prop:item.communicationProtocolCode, type: 'checkbox', labelWidth:'700px'})
								this.optionData[item.communicationProtocolCode] = []
								this.formData1[item.communicationProtocolCode] = []
								if(item.networkAccessVoList.length >0){
									this.optionData[item.communicationProtocolCode] = item.networkAccessVoList.map(e =>{
										return{
											label:e.networkAccessValue,value:e.networkAccessCode
										}
									})
								}
							})
						}
					}
				})
			},
			checkboxG(e){ //模块通讯协议及入网方式 选中效果
				this.formSet3.forEach(item =>{
					item.disabled = true
					this.networkAccessList.forEach(i =>{
						if(e.prop == i.data){
							if(e.e.length >0 && i.data == item.prop){
								item.disabled = false
							}else if(e.e.length == 0 ){
								item.disabled = false
							}
						}
					})
				})
				this.$forceUpdate()
			},
			radioInputChange(e){//radio自定义强制选中刷新
				this.$set(this.formData1,e.prop,e.e);
			},
			getImageEquipmentDetails(e){
				this.$request.get(this.$api.getImageEquipmentDetails, {
					dictImageEquipmentId:e,
				}).then(res=>{
						if(res.code == 200){
							this.formData1 = res.data
							this.partsInfo.items = this.formData1.partsInfo
							this.isDetail = true
						}
					})
			},
			save(flag){
				this.listDig.data.forEach(item =>{
					if(item.equipmentModel == this.formDig.equipmentModel){
						this.$set(this.partsInfo.items,this.listDig.index,item);
					}
				})
				this.dialogVisible = false
			},
			selectFittings(data,index){
				this.getGroup('DIGITALACCESSORIES','1')
				this.listDig.index = index
				this.dialogVisible = true
			},
			getDictionary(e,prop,index){
				let that = this
				if(index == null){
					let a = that.getDictionaryByType(e)
					a.then(function (res) { 
						let b  = res.map(item =>{
							return{
								name:item.dictValue,
								value:item.dictCode
							}
						})
						that.$set(that.optionData,prop,b)
					})
				}
			},
			inputBlur(e){
				if(e.prop === "equipmentName"){
					let that = this
					let a = that.queryNameDuplicate(this.formData1.groupId,e,'IMAGEMENTEQUIPMENT') //名称查重
					a.then(function (res) { 
						if(res.data == false){
							that.formData1[e.prop] = ''
						}
					})
				}
			},
			getModelBySuppliers(){
				this.$request.postForm(this.$api.getModelBySuppliers, {
					companyId:this.companyId,
					suppliers:this.formData1.supplierName,
					equipType:'INTERNETDEVICES'
				}).then(res=>{
					if(res.code == 200){
						let a = []
						a = res.data.map(item =>{
							return{
								label:item,
								value:item
							}
						})
						this.$set(this.optionData,'equipmentModel',a)
					}
				})
			},
			getPartsSuppliers(){
				this.$request.postForm(this.$api.getPartsSuppliers, {
					companyId:this.companyId,
					equipType:'INTERNETDEVICES'
				}).then(res=>{
					if(res.code == 200){
						let a = []
						a = res.data.map(item =>{
							return{
								label:item,
								value:item
							}
						})
						this.$set(this.optionData,'supplierName',a)
					}
				})
			},
			getGroup(e,i){
				this.$request.postForm(this.$api.getGroup, {
					companyId:this.companyId,
					groupType:e
				}).then(res=>{
						if(res.code == 200){
							let a = res.data.map(item =>{
								return{
									name:item.groupName,
									value:item.id
								}
							})
							if(i === '1'){
								this.$set(this.optionDataDig,'groupId',a)
							}else{
								this.$set(this.optionData,'groupName',a)
							}
						}
					})
			},
			close(e){
				if(e == false){
					this.formDig = {}
					this.dialogVisible = false
				}
			},
			handleChange(e){
				let flag = false
				if(this.optionData.groupName){
					this.optionData.groupName.forEach(item => {
						if(item.value == e){
							flag = true
							this.formData1.groupId = e
							this.formData1.groupName = item.name
						}
					});
				}
				if(flag === false){
					this.formData1.groupId = ''
					// this.duplicateQueryGroupName(this.formData1.groupName,'IMAGEMENTEQUIPMENT',this.companyId)
				}
			},
			submitData(){
				console.log(this.isDetail);
				this.formData1.companyId = this.companyId
				this.formData1.userId = this.userId
				this.formData1.partsInfo = this.partsInfo.items
				this.networkAccessList.forEach(item =>{
					this.isListIn(item.data)
				})
				if(this.isDetail){
					this.$request.postForm(this.$api.updateImageEquipment, {
						iotListDO:JSON.stringify(this.formData1)}).then(res=>{
						if(res.code == 200){
							this.$message.success(res.message)
							this.$router.push(`/IntelligentEquipment/myEquipment/monitoring?t=${new Date().getTime()}`)
						}
					})
				}else{
					this.$request.postForm(this.$api.addIotDevices, {
						iotListDO:JSON.stringify(this.formData1)}).then(res=>{
						if(res.code == 200){
							this.$message.success(res.message)
							this.$router.push(`/IntelligentEquipment/myEquipment/monitoring?t=${new Date().getTime()}`)
						}
					})
				}
			},
			isListIn(e){
				if(this.formData1[e].length >0){
					this.formData1.communication = e
					this.formData1.communicationValue = this.formData1[e][0]
				}
				delete this.formData1[e]
			},
			deleteData(){
				this.$confirm('确定要删除吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.postForm(this.$api.deleteImageEquipment, {
						dictImageEquipmentId:this.formData1.dictImageEquipmentId,
					}).then(res=>{
							if(res.code == 200){
								this.$message.success(res.message)
								this.$router.push(`/IntelligentEquipment/myEquipment/lot?t=${new Date().getTime()}`)
							}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
		
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 15px;
		margin-top: 10px;
	}

	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}

	.isdelete {
		color: #F42929;
	}
	.btnBox {
		width: 100%;
		padding-top: 15px;
		border-top: 1px solid #DCDCDC;
		text-align: center;
		.el-button{
			width: 120px;
			margin-right: 5px;
		}
	}
</style>
